<style scoped>
  .weui-form-preview__hd label, .weui-form-preview__hd em {
    font-size: .9em !important;
  }
  .weui-loadmore_line .weui-loadmore__tips {
    background-color: #eee;
  }
  .rj-cell.max span{
    font-size: 16px;
    padding-right: 20px;
  }
  .rj-cell label {
    color: #333;
    font-size: 14px;
    width: 44%;
    display: inline-block;
    padding: 5px 3%;
    text-align: right;
  }
  .rj-cell span {
    font-size: 14px;
    color: #333;
    display: inline-block;
    width: 50%;
  }
  .rj-cell.note label{
    float: left;
  }
  .rj-cell.note span{
    width: 80%;
    display: inline-block;
  }
  .weui-cells {
    margin-top: 0;
  }
  .weui-cells_form {
    background: #fbfbfb;
  }
  .weui-cell {
    background: #fff;
  }
  .weui-cells__title {
    text-align: left;
  }
  .oitem {
    padding: 3px;
  }
  .hide {
    display: none;
  }
  #acts {
    font-size: 0;
  }
  #acts span {
    font-size: 14px;
  }
  .halfbtn {
    display: inline-block;
    width: 49%;
  }
  .weui-label {
    text-align: left;
  }
</style>
<template>
  <div class="addcustomer">
    <div style="height: 50px; line-height: 50px; background: #f7f7f7; text-align: center; font-size: 16px; border-bottom: 1px solid #bdbbbc; position: relative">
      添加客户
      <a href="javascript:;" @click="$router.back(-1)" style="position: absolute; left: 10px; top: 8px">
        <img src="@/assets/back.png" style="width: 20px" />
      </a>
    </div>
    <div class="weui-cells weui-cells_form">
      <form action="" method="post" id="formid">
        <input type="hidden" name="entity.type" value="1" />
        <div class="oitem">
          <div class="weui-cell weui-cell-select" style="padding: 0 15px;">
            <div class="weui-cell__hd"><label class="weui-label">客户类型</label></div>
            <div class="weui-cell__bd">
              <select class="weui-select" name="entity.flag" v-model="ctype">
                <option selected="" v-for="(item, index) in cusTypes" :value="item.dictkey">{{item.dicttext}}</option>
              </select>
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">名称</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" name="entity.name" placeholder="请输入客户名称">
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">收货城市</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" id="endCity" name="entity.province" placeholder="请选择收货城市" >
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">详细地址</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" name="entity.address" placeholder="请输入收货详细地址">
            </div>
          </div>
          <div class="weui-cell weui-cell-select" style="padding: 0 15px;">
            <div class="weui-cell__hd"><label class="weui-label">销售币种</label></div>
            <div class="weui-cell__bd">
              <select class="weui-select" name="entity.currency">
                <option value="1">人民币</option>
                <option value="2">美元</option>
              </select>
            </div>
          </div>
<!--          <div class="weui-cell">-->
<!--            <div class="weui-cell__hd"><label class="weui-label">法人</label></div>-->
<!--            <div class="weui-cell__bd">-->
<!--              <input class="weui-input" type="text" name="entity.legal" placeholder="请输入法人">-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="weui-cell">-->
<!--            <div class="weui-cell__hd"><label class="weui-label">商务联系人</label></div>-->
<!--            <div class="weui-cell__bd">-->
<!--              <input class="weui-input" type="text" name="entity.manager" placeholder="请输入商务联系人">-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="weui-cell">-->
<!--            <div class="weui-cell__hd"><label class="weui-label">联系电话</label></div>-->
<!--            <div class="weui-cell__bd">-->
<!--              <input class="weui-input" type="text" name="entity.managertel" placeholder="请输入商务联系人电话">-->
<!--            </div>-->
<!--          </div>-->
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">收货联系人</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" id="contact" name="entity.contact" placeholder="请输入收货联系人">
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">联系电话</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" id="contactno" name="entity.contactno" placeholder="请输入收货联系人电话">
            </div>
          </div>
<!--          <div class="weui-cell">-->
<!--            <div class="weui-cell__hd"><label class="weui-label">联系人邮箱</label></div>-->
<!--            <div class="weui-cell__bd">-->
<!--              <input class="weui-input" type="text" name="entity.memail" placeholder="请输入商务联系人邮箱">-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="weui-cell">-->
<!--            <div class="weui-cell__hd"><label class="weui-label">财务联系人</label></div>-->
<!--            <div class="weui-cell__bd">-->
<!--              <input class="weui-input" type="text" name="entity.financer" placeholder="请输入财务联系人">-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="weui-cell">-->
<!--            <div class="weui-cell__hd"><label class="weui-label">联系电话</label></div>-->
<!--            <div class="weui-cell__bd">-->
<!--              <input class="weui-input" type="text" name="entity.fintel" placeholder="请输入财务联系人电话">-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="weui-cell">-->
<!--            <div class="weui-cell__hd"><label class="weui-label">财务邮箱</label></div>-->
<!--            <div class="weui-cell__bd">-->
<!--              <input class="weui-input" type="text" name="entity.finemail" placeholder="请输入财务邮箱">-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="weui-cell">-->
<!--            <div class="weui-cell__hd"><label class="weui-label">注册资金</label></div>-->
<!--            <div class="weui-cell__bd">-->
<!--              <input class="weui-input" style="width: 55%;display: inline-block;" type="number" name="entity.registcapital" placeholder="注册资金">-->
<!--              <input class="weui-input" style="width: 40%;display: inline-block;" type="text" value="万元" />-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="weui-cell">-->
<!--              <div class="weui-cell__bd">-->
<!--                <textarea class="weui-textarea" name="entity.remark" placeholder="请输备注内容" rows="3"></textarea>-->
<!--              </div>-->
<!--          </div>-->
        </div>

        <div class="weui-btn-area">
          <a class="weui-btn weui-btn_primary halfbtn subbtn" href="javascript:" @click="postForm">保存</a>
          <a class="weui-btn weui-btn_primary halfbtn" href="javascript:;" @click="$router.back(-1)">返回</a>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AddAddress',
  data () {
    return {
      customerguid: '',
      cusTypes: '',
      ctype: 2
  }
  },
  created() {
  },
  mounted () {
    this.customerguid = this.$store.state.customer.guid;
    this.getCusTypes();
    $("#endCity").cityPicker({
      title: "请选择收货地址",
      onChange: function (data) {
        let addr = data.displayValue;
        //console.log('addr:', addr)
        // $('input[name="entity.province"]').val(addr[0]);
        // $('input[name="entity.city"]').val(addr[1]);
        // $('input[name="entity.district"]').val(addr[2]);
      }
    });
  },
  methods: {
    getCusTypes: function() {
      let that = this;
      this.axios({
        method: 'get',
        responseType: 'json',
        url: '/sales/Sellform!findDict.action',
        params: {type: 119}
      }).then(response => {
        if (response.statusText == "OK") {
          that.cusTypes = response.data;
        } else {
          this.toastText('获取运费计价方式数据失败');
        }
      });
    },
    //提交表单数据
    postForm: function(type) {
      let that = this;

      if ($('input[name="entity.name"]').val() == '') {
        this.toastText('请输入客户名称！');
        return false;
      } else if ($('input[name="entity.province"]').val().length > 50) {
        this.toastText('客户名称太长，不符合系统要求！');
        return false;
      } else if ($('input[name="entity.province"]').val() == '') {
        this.toastText('请选择收货城市！');
        return false;
      }
      // else if ($('input[name="entity.province"]').val().length > 20) {
      //   this.toastText('收货城市太长，不符合系统要求！');
      //   return false;
      // }
      else if ($('input[name="entity.address"]').val() == '') {
        this.toastText('请输入详细地址！');
        return false;
      } else if ($('input[name="entity.address"]').val().length > 200) {
        this.toastText('详细地址太长，不符合系统要求！');
        return false;
      } else if ($('input[name="entity.contact"]').val() == '') {
        this.toastText('请输入收货联系人！');
        return false;
      } else if ($('input[name="entity.contact"]').val().length > 30) {
        this.toastText('收货联系人太长，不符合系统要求！');
        return false;
      } else if ($('input[name="entity.contactno"]').val() == '') {
        this.toastText('请输入收货联系人电话！');
        return false;
      } else if ($('input[name="entity.contactno"]').val().length > 25) {
        this.toastText('联系人电话太长，不符合系统要求！');
        return false;
      }
      //防止重复提交
      $('.subbtn').attr("disabled",true).css("pointer-events","none");
        //显示提交状态
        $.showLoading("正在提交");

      this.axios({
        method: 'post',
        url: '/sales/Customer!save.action',
        params: this.serialize2Obj($("#formid").serializeArray())
      }).then(response => {
        //恢复提交按钮可点击
        $('.subbtn').attr('disabled', false).css("pointer-events","auto");
          //关闭提交状态
          $.hideLoading();

        if (response.data.msg == 'success') {
            this.toastSuccess("保存成功");
            this.$router.push({name: 'CustomerList'});
        } else if (response.data.msg == 'hascust') {
          this.toastText('该客户已存在');
        } else if (response != undefined && response.data != undefined && response.data.msg == 'sessionTimeOut') {
          //不不设置提示
        } else {
          this.toastError('系统错误');
        }
      }).catch(function (error) {
        //恢复提交按钮可点击
        $('.subbtn').attr('disabled', false).css("pointer-events","auto");
          //关闭提交状态
          $.hideLoading();
        that.toastError('系统错误');
      });
    },
  }
}
</script>
